<template>
	<el-form-item>
    <span slot='label'><i class="red_text">*</i>期望薪资：<br/><i class="blue_text">(任选一项)</i></span>
    <div class="flex_box wages" v-for="(item,index) in salaryList" :key='index'>
      <el-radio v-model="salary" :label="index" @change='radioChange'>{{item.value_name}}</el-radio>
      <div class="flex_box" v-if="item.type!=3">
        <el-input v-model="item.start" class="flex1" @blur='salaryChange'></el-input>
        <span>-</span>
        <el-input v-model="item.end" class="flex1" @blur='salaryChange'></el-input>
        <span v-if="item.type!=3">{{item.unit}}</span>
      </div>
    </div>
  </el-form-item>
</template>

<script>
  export default {
    data () {
			return {
				salary:0,
				salaryIndex:[-1,-1],
				salaryList: [
					{value_name:'按天结',unit:'元/天',start:'',end:'',type:1},
					{value_name:'按月结',unit:'元/月',start:'',end:'',type:2},
					{value_name:'薪资面议',type:3,start:'0.00',end:'0.00'},
				]
			}
		},
		methods:{
			// 单选按钮change
			radioChange(e){
				this.salary = e
				this.salaryChange()
			},
			// input 失去焦点
			salaryChange() {
				let salary_type = this.salaryList[this.salary].type
				let min_money = this.salaryList[this.salary].start
				let max_money = this.salaryList[this.salary].end
				this.$emit('salaryChange',{salary_type,min_money,max_money})
			},
			// 修改时更新数据
      updateData(salary_type,min_money,max_money) {
        if(salary_type) {
          this.salaryList.findIndex((res,index)=>{
            if (res.type == salary_type) {
              this.salary = index
              res.start = min_money
              res.end = max_money
            } else {
              res.start = ''
              res.end = ''
            }
          })
        } else {
          this.salary = -1
          this.salaryList.forEach(res=>{
            res.start = ''
            res.end = ''
          })
        }
      }
		}
	}
</script>
<style scoped lang='scss'>
  @import '~@/styles/element-variables.scss';
  .wages span{
    margin:0 10px;
  }
  .wages{
    margin-bottom: 20px;
  }
  .wages:last-child{
    margin:0;
  }
  .blue_text{
    font-style: normal;
    color:$--color-primary;
  }
  .red_text{
    color:#FF6767;
    margin-right: 4px;
  }
</style>

